
<template>
  <div>
    <van-nav-bar
      title="30天减肥饮食计划"
      left-text="返回"
      left-arrow
      @click="onClickLeft"
    />

    <div class="lose">
      <div class="log-img">
        <img src="../../assets/img/养成10.png" alt="" />
      </div>

      <van-tabs v-model:active="active">
        <van-tab title="介绍">
          <div class="log">
            <div class="log-box">
              <div class="log-left"> • 难度系数:</div>
              <div class="log-right">
                <van-icon name="star" />
                <van-icon name="star" />
              </div>
            </div>

            <div class="log-box">
              <div class="log-left"> • 适用人群:</div>
              <div class="log-right">轻、中度肥胖，饮食习惯不良者</div>
            </div>

            <div class="log-box">
              <div class="log-left"> • 预期效果:</div>
              <div class="log-right">减脂2-3斤</div>
            </div>

            <div class="log-text">
              <div class="log-text-title">
               很多人在问怎么才能快速减肥，节食、吃减肥药以及各种偏方都是浮云！
              </div>
              <div class="log-text-title">
                事实上，绝大部分所谓的速效减肥方法都是不健康的，并且减下去的体重非常容易反弹。
              </div>
              <div class="log-text-title">
                渐进式的减肥效果才更健康更持久。
              </div>
               <div class="log-text-title">
                如果你想在短期内减掉合理的体重（比如一周减掉约1~2斤），除了适量运动，必须要调整饮食和生活方式。
              </div>
              <div class="text-te"></div>
              <div class="log-text-title">
                本方案会通过每天的小任务帮你进行饮食调节，也帮助你形成正确的减肥和饮食观念。
              </div>
               <div class="log-text-title">
                按照本计划调整每天饮食，你将学会科学、健康、可持续的减肥方法，从今天开始越吃越瘦！
              </div>
               <div class="log-text-title">
                友情提示：搭配【30天减肥运动计划】会有意想不到的减肥效果呦！
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="目标">内容 2</van-tab>
      </van-tabs>
    </div>
  </div>
</template>
  
<script setup lang='ts'>
import { ref } from 'vue'

const active = ref(0)

const onClickLeft = () => history.back()
</script>




<style lang="scss" scoped>
.lose {
  width: 100%;
  height: 100%;
  // background-color: yellow;
  .log-img {
    width: 100%;
    height: 150px;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .log{
    .log-box {
      width: 100%;
      height: 50px;
    }

    .log-left {
      float: left;
      height: 40px;
      width: 30%;
      // background-color: blue;
      text-align: center;
      padding-top: 10px;
    }
    .log-right {
      float: left;
      height: 40px;
      width: 70%;
      // background-color: rgb(24, 148, 96);
      text-align: left;
      padding-top: 10px;
    }

    .log-text {
      width: 100%;
      padding: 10px;
      // line-height: 30px;
      // background-color: pink;
      color: #666;

      .log-text-title {
        line-height: 30px;
      }
      .text-te {
        color: red;
        font-weight: bold;
      }
    }
  }
}
</style>